import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:smart_shop/components/shop_search_bar.dart';
import 'package:smart_shop/pages/home/componenets/home_banner.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 3.1 保存首页数据(总)
  Map resData = {};
  // 3.2 保存首页数据(轮播图)
  List bannerList = [];

  // initState 初始化数据
  @override
  void initState() {
    // 获取数据
    getData();
    super.initState();
  }

  // 获取数据
  getData() async {
    // 1. 创建 dio 实例
    Dio dio = Dio();
    // 2. 发送网络请求，获取数据
    Response res = await dio
        .get('http://smart-shop.itheima.net/index.php?s=/api/page/detail');
    // 3. 保存数据 + 更新视图
    setState(() {
      // 3.1 保存首页数据(总)
      resData = res.data['data']['pageData'];
      // 3.2 保存轮播图数据
      bannerList = resData['items'][1]['data'];
      // print(bannerList);
    });

    // 浏览器会出现跨域请求报错，安卓、iOS、HarmonyOS 应用不存在跨域
    //（协议、域名、端口 3个的任意一个不同，都视为跨域）
    //   1. 协议  （http、https）
    //   2. 域名  ip地址  域名(localhost、smart-shop.itheima.net)
    //   3. 端口号  80、443、xxxx

    // 解决方案：
    //   1. 最终部署到公司的服务器上（同域情况下就没问题）
    //   2. 后端配置允许跨域访问（生产环境）
    //   3. 修改 flutter 的 sdk 配置，允许跨域访问（开发环境）✅

    // 如何修改方案3的 flutter sdk 配置，允许跨域访问？
    //   1. 终端运行：where flutter ，查看 flutter sdk 的安装路径
    //   2. 打开 sdk 路径，打开 flutter/packages/flutter_tools/lib/src/web/chrome.dart 文件
    //   3. 搜索 --disable，查找书写未知，末尾添加 '--disable-web-security' 配置
    //   4. 打开 flutter/bin/cache 路径，删除两个文件：flutter_tools.stamp 和 flutter_tools.snapshot
    //   4. 终端运行：flutter doctor ，生成新的配置
    //   5. 重启项目，即可解决跨域问题✅
  }

  // build 构建页面
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '智慧商城',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.red,
        centerTitle: true,
      ),
      body: ListView(
        children: [
          // 搜索框
          const ShopSearchBar(),
          // 轮播图
          HomeBanner(bannerList: bannerList),
          const Text('首页'),
        ],
      ),
    );
  }
}
